import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class WidgetIconsPage extends StatelessWidget {
  /// 图标数据源
  final Map<String, IconData> icons;

  const WidgetIconsPage({
    Key? key,
    required this.icons,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Feather Icons"),
        centerTitle: true,
        elevation: 0.0,
      ),
      body: CupertinoScrollbar(
        child: GridView(
          // 滚动嵌套时, 让内部区域不允许滚动, 避免滚动嵌套问题
          shrinkWrap: true,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
            childAspectRatio: 1.0,
            crossAxisSpacing: 0.5,
            mainAxisSpacing: 0.5,
          ),
          children: icons.keys.map(
            (key) {
              var icon = icons[key];
              return InkWell(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute<Null>(
                      builder: (BuildContext context) {
                        return GestureDetector(
                          onTap: () {
                            Navigator.of(context).pop();
                          },
                          child: Container(
                            color: Colors.white,
                            alignment: Alignment.center,
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Hero(
                                  tag: key,
                                  child: Icon(icon, size: 100),
                                ),
                                SizedBox(height: 15),
                                Hero(
                                  tag: '$key-text',
                                  child: Material(
                                    child: Text(
                                      key,
                                      textAlign: TextAlign.center,
                                      style: TextStyle(fontSize: 18.0),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        );
                      },
                    ),
                  );
                },
                child: Container(
                  padding: EdgeInsets.all(8.0),
                  color: Colors.white,
                  alignment: Alignment.center,
                  child: Column(
                    children: <Widget>[
                      Container(
                        height: 40,
                        child: Hero(tag: key, child: Icon(icon, size: 28)),
                      ),
                      SizedBox(height: 4),
                      Expanded(
                        child: Container(
                          height: 5,
                          child: Hero(
                            tag: '$key-text',
                            child: Material(
                              child: Text(
                                "$key",
                                textAlign: TextAlign.center,
                                maxLines: 2,
                                // overflow: TextOverflow.ellipsis,
                                style: TextStyle(fontSize: 12.0),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          ).toList(),
        ),
      ),
    );
  }
}
